<template>
  <vol-box
    :lazy="true"
    v-model="model"
    title="采购单明细"
    :min-height="400"
    :width="1200"
    :padding="5"
    :onModelClose="onModelClose"
  >
    <!-- <div class="table-item-buttons">
      <div>
        <el-input
          style="width: 140px; margin-right: 10px"
          v-model="goods_no"
          placeholder="商品编码"
        ></el-input>
        <el-button type="primary" @click="reload" color="#95d475" plain
          >查询</el-button
        >
      </div>
    </div> -->
    <!-- <vol-table
      ref="editTable1"
      :url ="url"
      :columns="options.columns"
      :max-height="400"
      :index="true"
      :tableData="options.data"
      :pagination-hide="false"
      :click-edit="true"
      :endEditBefore="endEditBefore"
      :endEditAfter="endEditAfter"
      :beginEdit="beginEdit"
      :textInline="false"
      :ck="false"
    ></vol-table> -->
    <vol-table
      ref="table"
      :url="url"
      index
      :columns="options.columns"
      :min-height="400"
      :pagination-hide="true"
      :load-key="true"
      :column-index="true"
      :beginEdit="beginEdit"
      :endEditBefore="endEditBefore"
      :textInline="false"
      :ck="false"
    ></vol-table>
    <template #footer>
      <div>
        <el-button type="primary" size="small" @click="detailOnSelect"
          >关闭</el-button
        >
      </div>
    </template>
  </vol-box>
</template>
  
  <script lang="jsx">
import VolBox from "@/components/basic/VolBox.vue";
import VolTable from "@/components/basic/VolTable.vue";
export default {
  components: {
    "vol-box": VolBox,
    VolTable,
  },
  data() {
    return {
      model: false,
      goods_no:null,
      url:"api/q_purchaseList/GetPurchaseList",
      pagination:{
        total:0,
        size:60,
        sizes:80,
        sortName:"Purchase",
      },
      options: {
        data: [
          //表数据
        ],
        columns: [
          //表配置
          {
            field: "PurchaseList", //数据库表字段,必须和数据库一样，并且大小写一样
            title: "ID", //表头显示的名称
            isKey: true, //是否为主键字段
            hidden: true, //是否显示
          },
          {
            field: "Purchase", //数据库表字段,必须和数据库一样，并且大小写一样
            title: "父级ID", //表头显示的名称
            isKey: false, //是否为主键字段
            hidden: true, //是否显示
          },
          {
            field: "Voucher_sub",
            title: "采购申请单编码",
            width: 120,
            sortable: true, //是否排序(目前第一个字段为排序字段，其他字段排序开发中)
          },
          {
            field: "Goods_sub",
            title: "商品编码",
            width: 80,
          },
          {
            field: "Goods_name",
            title: "商品名称",
            type: "string",
            width: 100,
            require: true,
          },
          {
            field: "Goods_price",
            title: "单价",
            type: "string",
            width: 80,
          },
          {
            field: "Tax_rate",
            title: "税率",
            type: "byte",
            bind: { key: "税率", data: [] }, //此处值为data空数据，自行从后台字典数据源加载
            width: 110,
          },
          {
            field: "Goods_num",
            title: "数量",
            type: "string",
            width: 80,
          },
          {
            field: "Goods_size",
            title: "规格",
            type: "string",
            width: 80,
            require: true,
          },
          {
            field: "Goods_in_state",
            title: "入库状态",
            type: "byte",
            bind: { key: "入库状态", data: [] }, //此处值为data空数据，自行从后台字典数据源加载
            width: 110,
          },
          {
            field: "Remark",
            title: "备注",
            type: "string",
            width: 80,
            require: true,
          },
        ],
      },
    };
  },
 
  mounted() {
    //设置求和默认值,手动输入值后会自动计算
    // this.$refs.editTable1.summaryData[2] = 10;
  },
  methods: {
    open(val) {
      this.url="api/q_purchaseList/GetPurchaseList"
      this.url+=`?sub=${val}`
      this.model = true;
      // const params = {
      //   page: 1,
      //   rows: 100,
      //   sort: "Voucher_sub",
      //   wheres: "[]",
      // };
      setTimeout(() => {
        this.$refs.table.load("",true)
      }, 0);
     
    },
    loadTableAfter(data, callBack) {
      //此处是从后台加数据后，你可以在渲染表格前，预先处理返回的数据
     // console.log("加载数据后" + data);
      callBack(true); //同上
    },
    async onModelClose() {
      console.log("关闭");
      const url = "api/q_purchaseList/GetPurchaseList";
      this.url=url
      this.$refs.table.reset()
      this.model = false;
    },
    async detailOnSelect() {
      console.log("确认");
      const url = "api/q_purchaseList/GetPurchaseList";
      this.url=url
      this.$refs.table.reset()
      this.model = false;
    },
    reload() {
       this.$refs.table.load(null, true);
       this.$message.success('查询成功')
    },
    beginEdit(row, column, index) {
      console.log("编辑开始前" + JSON.stringify(row));
      return true;
    },
    endEditBefore(row, column, index) {
      console.log("结束编辑前" + JSON.stringify(row));
      return true;
    },
    endEditAfter(row, column, index) {
      console.log("结束编辑后" + JSON.stringify(row));
      return true;
    },
  },
};
</script>
  
  <style  lang="less" scoped>
.table-item-buttons {
  flex: 1;
  text-align: right;
}
</style>